<template>
  <div>
    <el-form :model="user" label-position="right" label-width="100px">
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="用户名">
            <el-input v-model="user.username"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="微信Uid">
            <el-input v-model="user.userUid"/>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <el-button type="info" @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 列表展示 -->
    <el-table :data="userList" stripe table-layout="fixed" >
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="userUid" label="WXPusherID" width="300px"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default>
          <el-button link type="primary" size="small" @click="edit">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--    分页组件-->
    <el-row justify="end" align="middle" style="margin-top: 20px;">
      <el-pagination
          v-model:current-page="pageInfo.currentPage"
          v-model:page-size="pageInfo.pageSize"
          v-model:total="pageInfo.totalItem"
          :page-sizes="[10, 20, 50, 100]"
          background
          layout="sizes, prev, pager, next,total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-row>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue';
import {ElMessage} from "element-plus";
import {resetReactive, createPageInfo, readResponse, filterEmptyFields} from "@/utils/index";
import {getUserList} from "@/api/user";
// 单独的pageInfo对象
const pageInfo = reactive(createPageInfo());


const user = reactive({
  id: '',
  username: '',
  userUid: ''
})


const userList = ref([]);

onMounted(() => {
  onSubmit();
})
//执行搜索
const onSubmit = async () => {
  await handleSearch(user);
}

//执行重置
const reset = async () => {
  resetReactive(user);
  pageInfo.currentPage = 1;
  pageInfo.pageSize = 10;
  await handleSearch(user);
}
//分页查询动作
const handleCurrentChange = async (curPage) =>{
  pageInfo.currentPage = curPage;
  await handleSearch(user);
}
//调整分页大小
const handleSizeChange = async (pageSize) =>{
  pageInfo.pageSize = pageSize;
  await handleSearch(user);
}
//发起请求
const handleSearch = async (user) => {
  const body = {...filterEmptyFields(user), ...pageInfo};
  const response = await getUserList(body);
  if (response.data.code === 200) {
    // console.log(response.data);
    ElMessage.success("查询成功");
    userList.value = readResponse(response, pageInfo);
  } else {
    ElMessage.error(response.data.errorMessage);
  }
};
</script>
  